<!-- 批发采购订单列表-详情（待确认、已取消、待收货、已拒绝、部分收获、已完成） -->
<template>
  <div
    class="purchasing-purchase-consignment-detail"
  >
    <el-container class="registercard-box">
      <tabs
        :tabs-arr="tabSliceList"
        @returnIndex="handleReturnIndex" />
      <div v-if="activeIndex === 0">
        <RecordInfo
          :record-form="headerFrom"
          :record-data="topData">
          <template v-slot:recordInfoslot="slotProp">
            <div
              class="solt-info"
              v-if="activeIndex===0">
              <span class="left-span">采购产品总数<span>{{ orderInfoForm.purchaseNum }}</span></span>
              <span class="left-span">品种数<span>{{ orderInfoForm.productSpecCount }}</span></span>
              <span class="left-span">
                金额合计（元）
                <span class="price">{{ orderInfoForm.orderMoney | getFormatterPrice }}</span>
              </span>
            </div>
          </template>
        </RecordInfo>
        <el-editable
          class="editables"
          height="500"
          :columns="listColumns"
          :custom-attr="$TABLE_HEAD['beforedistributor.purchasing.purchase.consigment.detail']+$route.query.orderStatus"
          :data="settlemList"
        >
          <template
            slot="default-registrationNumber"
            slot-scope="scope">
            <el-button
              :disabled="!scope.row.registrationNumber||!scope.row.registrationNumberId"
              v-html="regisNoButton(scope.row, 'registration')"
              @click="showPdfRegistion(scope.row.registrationNumberId)"
              type="text"
            />
          </template>
        </el-editable>
        <!-- 分页模块 -->
        <el-pagination
          align="right"
          style="margin-top:20px;"
          @size-change="sizeChange"
          @current-change="pageChange"
          :page-sizes="page.PAGE_NUMBER"
          :page-size="page.size"
          :current-page="page.page"
          :layout="page.PAGINATION_LAYOUT"
          :total="page.total"
        />
      </div>

      <!-- 部分收货 -->
      <div v-if="activeIndex === 1">
        <RecordInfo
          :record-form="partialCollectionColumns"
          :record-data="topData"/>
        <div
          v-for="(item,index) in deliveryDetailList"
          :key="index">
          <div class="order-list-info">
            <span>收货单号<span>{{ item.receiveCode }}</span></span>
            <span>收货时间<span>{{ item.receiveCreatedAt }}</span></span>
            <span>收货人<span>{{ item.receiveCreatedBy }}</span></span>
          </div>
          <div class="order-list-info">
            <span>收货产品总数<span class="recive-count add-color" >{{ item.receiveItemCount }}</span></span>
            <span>品种数<span class="add-color">{{ item.productSpecCount }}</span></span>
            <span>金额合计 （元）<span class="add-price">{{ item.orderMoney | getFormatterPrice }}</span></span>
          </div>
          <el-editable
            class="editables"
            height="500"
            :columns="cardColumns"
            :custom-attr="$TABLE_HEAD['beforedistributor.purchasing.purchase.consigment.detail']+$route.query.orderStatus"
            :data="item.receiveOredrItemageBean.content"
          >
            <template
              slot="default-receiveNum"
              slot-scope="scope">
              <el-button
                class="show-btn-dialog"
                type="text"
                @click="showDialogMethod(scope.row, item)">
                {{ scope.row.receiveNum }}
              </el-button>
            </template>
            <template
              slot="default-registrationNumber"
              slot-scope="scope">
              <el-button
                :disabled="!scope.row.registrationNumber||!scope.row.registrationNumberId"
                v-html="regisNoButton(scope.row, 'registration')"
                @click="showPdfRegistion(scope.row.registrationNumberId)"
                type="text"
              />
            </template>
          </el-editable>
          <el-pagination
            align="right"
            style="margin-top:20px;"
            @size-change="reciveHandleSizeChange($event,index)"
            @current-change="reciveHandleCurrentChange($event,index)"
            :page-sizes="pageList[index].PAGE_NUMBER"
            :page-size="pageList[index].pageSize"
            :current-page="pageList[index].curPage"
            :layout="pageList[index].PAGINATION_LAYOUT"
            :total="pageList[index].total"
          />
        </div>
      </div>
    </el-container>
    <dialogInfo
      :dialog-title='dialogTitle'
      :dialog-visible.sync='dialogVisible'
      :card-columns='dialogCardCompletedColumns'
      :dialog-list='dialogList'
      :card-columns-info='cardSonConfirmedColumns'
      :dialog-list-info='dialogListInfo'
      @getInfo='getInfo'
      @closeDialog='closeDialog'
      ref='dialogInfo'
      :dialog-total='dialogTotol'
    />
  </div>
</template>

<script>
import dialogInfo from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/dialogInfo'
import tabs from '@components/tabs'
import RecordZoomCard from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/accompaniedbygoods'
import RecordInfo from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/record'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import paginationMixin from '@mixins/paginationMixin'
import ElEditable from '@components/el-editable'
import { formatDate, getFormatterPrice } from '@const/filter.js'
import { attrItemList } from '@const/orderCenterApi'
import { hasIn, cloneDeep } from 'lodash'

import {
  deliverAddress,
  replenishmentTopDetail,
  replenishmentTopDetailList,
  deliveryDetailList,
  deliverygetSaleOrderDeliveryDetail,
  deliveryOcBsNeedSalegetDetail,
  hossynPssPsOrderYyPssPsNeedOrderReceive,
  hossynPssPsOrderYyPssPsNeedOrderGetById,
  hossynPssPsOrderYyPssPsNeedOrdereNeedItem,
  hossynPssPsOrderYyPssPsNeedOrderPageReceiveItem,
  hossynPssPsOrderYyPssPsNeedOrderqueryReceiveItems,
  purchaseItemDistributorPageBean,
  needItemDistributorPageBean
} from '@const/beforeSettleApi'
import {
  cardSonConfirmedColumns,
  ORDER_STATUS_TEXT,
  headerPartialCollectionColumns,
  detailPartialCollectionColumns,
  cardCompletedColumns,
  dialogCardCompletedColumns,
  detailTabList,
  partialCollectionColumns,
  showPdfRegistion,
  regisNoButton
} from './const'
import { mapMutations } from 'vuex'
export default {
  mixins: [paginationMixin],
  data () {
    return {
      pageList: [],
      cardSonConfirmedColumns,
      detailPartialCollectionColumns,
      cardCompletedColumns,
      insideTableLoading: false,
      partDetailTableLoading: false,
      tableLoading: false,
      headerPartialCollectionColumns,
      dialogCardCompletedColumns,
      topData: {},
      detailTabList,
      page: {
        PAGE_NUMBER,
        PAGINATION_LAYOUT
      },
      dialogList: [],
      dialogListInfo: [],
      deliveryDetailList: [],
      dialogVisible: false,
      tableData: [],
      rowTitle: 'bsDeliveryDistributorVOList',
      ORDER_STATUS_TEXT,
      activeIndex: 0,
      dialogTitle: '收货信息',
      orderInfoForm: {
        purchaseNum: '',
        productSpecCount: '',
        orderMoney: ''
      },
      settlemList: [],
      dialogId: '',
      receiveId: '',
      dialogTotol: 0,
      partialCollectionColumns
    }
  },
  components: {
    RecordZoomCard,
    RecordInfo,
    ElEditable,
    tabs,
    dialogInfo
  },
  computed: {
    id () {
      return this.$route.query.id
    },
    headerFrom () {
      return this.partialCollectionColumns
    },

    listColumns () {
      // return this.detailPartialCollectionColumns
      if (
        Number(this.$route.query.purchaseOrderStatus) !== 8 &&
        Number(this.$route.query.purchaseOrderStatus) !== 9 &&
           Number(this.$route.query.purchaseOrderStatus) !== 10 &&
        Number(this.$route.query.purchaseOrderStatus) !== 11 &&
        Number(this.$route.query.purchaseOrderStatus) !== 1 &&
        Number(this.$route.query.purchaseOrderStatus) !== 2
      ) {
        let Columns = cloneDeep(this.detailPartialCollectionColumns)
        Columns = Columns.concat([{
          prop: 'receiveNum',
          label: '已收货数量',
          width: 120
        },
        {
          prop: 'awaitSendNum',
          label: '待收货数量',
          width: 120
        }])
        return Columns
      } else {
        let Columns = cloneDeep(this.detailPartialCollectionColumns)
        return Columns
      }
    },
    cardColumns () {
      return this.cardCompletedColumns
    },
    tabSliceList () {
      // this.$route.query.purchaseOrderStatus = 7 (已撤销状态，收货信息tab禁用)
      if (
        Number(this.$route.query.purchaseOrderStatus) !== 8 &&
        Number(this.$route.query.purchaseOrderStatus) !== 7 &&
        Number(this.$route.query.purchaseOrderStatus) !== 9 &&
           Number(this.$route.query.purchaseOrderStatus) !== 10 &&
        Number(this.$route.query.purchaseOrderStatus) !== 11 &&
        Number(this.$route.query.purchaseOrderStatus) !== 1 &&
        Number(this.$route.query.purchaseOrderStatus) !== 2
      ) {
        let detailTabsArr = cloneDeep(this.detailTabList)
        return detailTabsArr
      } else {
        let detailTabsArr = cloneDeep(this.detailTabList)
        detailTabsArr[1].disabled = true
        return detailTabsArr
      }
    }
  },
  filters: {
    getFormatterPrice
  },
  created () {},
  mounted () {
    this.initNavButtons()
    if (Number(this.$route.query.purchaseOrderStatus) === 5 || Number(this.$route.query.purchaseOrderStatus) === 3) {
      this.getDeliveryDetailList()
    }
    this.getOrderInfo()
    this.getOrderList()
  },
  methods: {
    regisNoButton,
    showPdfRegistion,
    handleReturnIndex (ind) {
      this.activeIndex = ind
    },
    ...mapMutations(['changeLayoutHandle']),
    // 初始化 导航栏 按钮组
    initNavButtons () {
      const btn = {
        type: 'btn',
        arr: [
          {
            type: 'button',
            noReturn: true,
            val: '返回',
            handle: this.back
          }
        ]
      }
      this.changeLayoutHandle(btn)
    },
    // 获取弹框列表，初始化页面时默认使用形参的参数1,20，页码切换时将其覆盖
    getInfo (page = 1, pageSize = 20) {
      this.$axios({
        method: 'post',
        url: needItemDistributorPageBean,
        data: {
          type: 1,
          page: page,
          pageSize: pageSize,
          id: this.dialogId,
          receiveId: this.receiveId
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        this.dialogTotol = obj.totalElements
        this.dialogListInfo = obj.content
      })
    },
    getOrderInfo () {
      this.$axios({
        method: 'post',
        url: hossynPssPsOrderYyPssPsNeedOrderGetById,
        data: {
          id: this.$route.query.id
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        for (let key in obj) {
          if (key === 'orderStatus') {
            obj[key] = ORDER_STATUS_TEXT[obj[key]]
            continue
          }
        }
        this.topData = obj
      })
    },
    getOrderList () {
      this.$axios({
        method: 'post',
        url: hossynPssPsOrderYyPssPsNeedOrdereNeedItem,
        data: {
          id: this.$route.query.id,
          page: this.page.page,
          pageSize: this.page.size
        }
      }).then(res => {
        let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
        this.settlemList = obj.yyPssPsNeedOrderItemVOPageBean.content
        this.page.total = obj.yyPssPsNeedOrderItemVOPageBean.totalElements
        this.orderInfoForm.purchaseNum = obj.purchaseNum
        this.orderInfoForm.productSpecCount = obj.productSpecCount
        this.orderInfoForm.orderMoney = obj.orderMoney
      })
    },
    showDialogMethod (data, item) {
      this.dialogVisible = true
      this.dialogId = data.id
      this.receiveId = item.receiveId
      let arr = []
      arr.push(data)
      this.dialogList = arr
      this.getInfo()
    },
    deliverySixPageList (ind) {
      this.$axios({
        method: 'post',
        url: hossynPssPsOrderYyPssPsNeedOrderPageReceiveItem,
        data: {
          // needOrderId: this.$route.query.id,
          // orderStatus: 9,
          // deliveryId: this.deliveryDetailList[ind].deliveryId,
          orderId: this.$route.query.id,
          receiveCode: this.deliveryDetailList[ind].receiveCode, // 收货订单编号
          page: this.pageList[ind].curPage, // 当前页
          pageSize: this.pageList[ind].pageSize
        }
      }).then(res => {
        let content = hasIn(res, 'data.payload.content')
          ? res.data.payload.content
          : []
        this.deliveryDetailList[ind].receiveOredrItemageBean.content = content
      })
    },

    getDeliveryDetailList () {
      this.partDetailTableLoading = true
      this.insideTableLoading = true
      // type标识订单来源，1.批发2.寄售3.跟台
      this.$axios({
        method: 'post',
        url: hossynPssPsOrderYyPssPsNeedOrderqueryReceiveItems,
        data: {
          orderId: this.$route.query.id,
          page: 1,
          pageSize: 20
        }
      })
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.deliveryDetailList = data.payload || []
          this.pageList = this.deliveryDetailList.map(item => {
            return {
              curPage: 1, // 当前页
              PAGE_NUMBER, // 页码数组
              PAGINATION_LAYOUT, // 页码功能布局
              pageSize: PAGE_NUMBER[0], // 一页的数量
              total: item.receiveOredrItemageBean.totalElements
            }
          })
        })
        .catch(e => {})
        .finally(() => {
          this.partDetailTableLoading = false
          this.insideTableLoading = false
        })
    },
    back () {
      this.$router.go(-1)
    },
    // 订单信息页码更改
    getItems () {
      this.getOrderList()
    },
    // 页码更改
    reciveHandleSizeChange ($event, index) {
      this.pageList[index].pageSize = $event
      this.deliverySixPageList(index)
    },
    // 切换不一样的页面,重置一切数据
    reciveHandleCurrentChange ($event, index) {
      this.pageList[index].curPage = $event
      this.deliverySixPageList(index)
    },
    closeDialog (dialogVisible) {
      this.dialogVisible = dialogVisible
      this.dialogId = ''
      this.receiveId = ''
      this.dialogList = []
    }
  }
}
</script>
<style lang="less">
.purchasing-purchase-consignment-detail {
  height: 100%;
  display: flex;

  .registercard-box {
    flex-direction: column;

    .el-form-item__label {
      width: 110px !important;
    }
    .show-btn-dialog {
      color: blue;
    }
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
    .price {
      color: #000;
    }
    .info-title {
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      padding-left: 16px;
      box-sizing: border-box;
      // background: red;
      span {
        margin-right: 16px;
      }
    }
    .order-list-info {
      padding-left: 16px;
      height: 30px;
      line-height: 30px;
      span {
        margin-right: 30px;
        font-size: 14px;
        span {
          padding: 0 8px;
          color: black;
          font-size: 14px;
        }
        .add-color {
          color: blue;
        }
        .add-price {
          color: red;
        }
      }
    }
  }
  .header-limit {
    .el-input__inner {
      width: 200px;
    }
    .el-date-editor {
      width: 368px;
    }
  }
  .dialog-info {
    margin-top: 46px;
  }
}
.isfelx {
  display: flex;
}
</style>
